import React, {useState, useEffect} from 'react';
import {connect} from 'react-redux';
import {Form, Table, Modal, Button, Tooltip, Input, Select} from 'antd';

import {defaultPagination, Search} from "../publicComponents";
import {config, mUrl} from "../../../config";
import {get, post} from "../../../utils";
import PicturesWall from "../../../compoments/PictureWall";

const Page = () => {
    const [dataSource, setDataSource] = useState([]); // 表格数据
    const [visible, setVisible] = useState(false);
    const [imgVisible, setImgVisible] = useState(false);
    const [searchData, setSearchData] = useState({});
    const [pagination, setPagination] = useState(Object.assign({},defaultPagination)); // 表格分页
    const [detail, setDetail] = useState({});
    const [img, setImg] = useState('');
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            width: 90,
            render: (text, record, index) =>(pagination.pageSize * (pagination.current ? pagination.current - 1 : 0) + index + 1)
        },
        {
            title: '操作',
            align: 'center',
            width: 100,
            render: (text, record, index) => {
                if (record.feedbackstate === 1) {
                    return (
                        <Button onClick={() => {
                            setDetail(record);
                            setVisible(true);
                        }} type={'primary'}>处理</Button>
                    );
                } else {
                    return '';
                }

            }
        },
        {
            title: '申请人',
            dataIndex: 'proposer',
            align: 'center',
            width: 120
        },
        {
            title: '联系方式',
            dataIndex: 'proposerphone',
            align: 'center',
            width: 150
        },
        {
            title: '投诉内容',
            dataIndex: 'content',
            align: 'center',
            render: remark => {
                let text = remark || '--';
                return (
                    <Tooltip placement={'topLeft'} title={remark}>
                        {text.length > 15 ? text.substr(0, 15) + '...' : text}
                    </Tooltip>
                );
            }
        },
        {
            title: '图片',
            dataIndex: 'printurl',
            align: 'center',
            width: 150,
            render: image => {
                if (image) {
                    return <span style={{cursor: 'pointer'}} onClick={() => showImage(image)}>显示图片</span>;
                } else {
                    return '--';
                }
            }
        },
        {
            title: '处理说明',
            dataIndex: 'remark',
            align: 'center',
            render: remark => {
                let text = remark || '--';
                return (
                    <Tooltip placement={'topLeft'} title={remark}>
                        {text.length > 15 ? text.substr(0, 15) + '...' : text}
                    </Tooltip>
                );
            }
        },
    ];

    const showImage = (url) => {
        setImg(url);
        setTimeout(() => {
            setImgVisible(true);
        }, 500);
    };

    useEffect(() => {
        fetch({});
    }, []);

    const fetch = async (params = {}) => {
        let start = 1;
        if (params.startList > 1) {
            start = params.startList;
        }
        get(mUrl.searchMessFeedbackList, {pageNo: start, pageSize: pagination.pageSize, ...params}).then((res) => {
            const {list = [], count = 0} = res.data;
            pagination.total = count;
            setPagination(pagination);
            setDataSource(list);
            setSearchData(params);
        });
    };

    const onSearch = (value) => {
        fetch(value);
    };

    const onReset = () => {
        fetch({});
    };

    const handleTableChange = (page) => {
        pagination.current = page.current;
        pagination.pageSize = page.pageSize;
        setPagination(pagination);
        fetch({
            ...searchData,
            startList: pagination.current
        });
    };


    return (
        <div style={{padding: 14, background: '#fff', minHeight: 360}}>
            <label><p>消息管理 / 投诉与建议</p></label>
            <Search
                onSearch={onSearch}
                onReset={onReset}
                searchData={[
                    {key: 'content', name: '内容', component: (<Input allowClear placeholder={'申请人/联系方式/投诉内容'}/>)},
                    // {
                    //     key: 'feedbackstate', name: '状态', component: (<Select placeholder={'请选择'}>
                    //         <Select.Option value={1}>待处理</Select.Option>
                    //         <Select.Option value={-1}>已处理</Select.Option>
                    //     </Select>), span: 4
                    // },
                ]}
            />
            <Table
                rowKey={(data) => data.feedbackid}
                dataSource={dataSource}
                columns={columns}
                size='small'
                bordered
                pagination={pagination}
                onChange={handleTableChange}
            />
            <EditModal
                visible={visible}
                detail={detail}
                submit={() => {
                    setVisible(false);
                    fetch(searchData);
                }}
                setVisible={setVisible}
            />
            <ImgModal
                setVisible={setImgVisible}
                img={img} visible={imgVisible}/>
        </div>
    );
};

const EditModal = (props) => {
    const {visible = false, setVisible, form, submit, detail = {}} = props;

    const onFinish = (value) => {
        value.feedbackid = detail.feedbackid;
        post(mUrl.upMessFeedback, value).then((res) => {
            if (res.state === 1) {
                submit();
            }
        });
    };

    return (
        <Modal
            title={'处理投诉'}
            visible={visible}
            onCancel={_ => setVisible(false)}
            footer={null}
            getContianer={false}
        >
            <Form form={form} onFinish={onFinish}>
                <Form.Item name={"remark"}
                           label={'处理说明'}
                           labelCol={{span: 6}}
                           style={{marginBottom: 15}}>
                    <Input.TextArea rows={2} placeholder={'请输入处理说明'}/>
                </Form.Item>
                <Form.Item style={{marginTop: 10, textAlign: 'center'}}>
                    <Button
                        htmlType="submit" type={'primary'}
                    >提交</Button>
                    <Button style={{marginLeft: 15}}
                            onClick={_ => setVisible(false)}
                    >取消</Button>
                </Form.Item>
            </Form>
        </Modal>
    );
};

const ImgModal = (props) => {
    const {visible = false, setVisible, img} = props;
    const [fileList, setFileList] = useState([]);

    useEffect(() => {
        if (visible) {
            let list = [];
            const setImgPush = (img, list, name) => {
                const imgList = img.split(',');
                imgList.forEach((item, index) => {
                    list.push({
                        uid: name + index,
                        name: name + index,
                        file_name: item,
                        status: 'done',
                        url: item,
                        file_path: item
                    });
                });
            };
            if (img) {
                setImgPush(img, list, 'printurl');
            }
            setFileList(list);
        }
    }, [visible]);

    return (
        <Modal
            title={'详情'}
            visible={visible}
            onCancel={_ => setVisible(false)}
            footer={null}
        >
            <Form>
                <Form.Item
                    label='图片'
                    labelCol={{span: 3}}
                >
                    <PicturesWall
                        size={fileList.length}
                        fileList={fileList}
                        multiple={false}
                        fileUpdate={() => {
                        }}
                    />
                </Form.Item>
                <Form.Item style={{marginTop: 10, textAlign: 'center'}}>
                    <Button
                        onClick={_ => setVisible(false)}
                    >关闭</Button>
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default connect()(Page);